h1,h2,h3,h4,h5,h6{font-size:100%}ol,ul{list-style:none}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}caption,th{text-align:left}q:before,q:after{content:''}a:active,a:focus{outline:0}*,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}

html,body{
  margin: 0;/*清除默认样式*/
  padding: 0;
  height: 100%;
}

#first{
  background-color: rgb(172,218,224);
}
.contai{
  position: relative;
  margin: 0 auto;
  height: auto !important;
  height: 100%;
  width: 1226PX;
}
/*横幅*/
.pic{
  top: 135px;
  position: absolute;
  width: 1226px;
}
.pic img{
  width: 100%;
  height: 100%;
}

/*轮播图*/
.swiper-container{
  height: 460px;
  width: 898px;
  margin-left: 44px;
  position: absolute;
  top: 0px;
}

.swiper-container img{
  height: 100%;
  width: 100%;
}
/*热点*/
.book-new div{
  position: absolute;
  height: 115px;
  width: 280px;
  top: 330px;
  right: 0px;
  background-color: rgba(172,218,224,0.6);
  margin-top: 15px;
}

.book-new ul{
  position: absolute;
  height: 78px;
  width: 270px;
  top: 370px;
  right: 0px;
}
.book-new li{
  font-size: 15px;
  list-style-type: none;
  padding: 1px;
}
.book-new a{
  font-size: 15px;
  text-align: center;
  color: #333333;
  text-decoration: none;
}
.book-new a:hover{
  color:rgb(196, 219, 102);
}
.new-title{
  text-align: center;
}
/* banner */
.banners{
  width: 1226px;
  height: 460px;
  margin: auto;
  position: relative;
  top: 120px;
}
.banners>nav>ul>li>img{
  width: 20px;
  height: 20px;
}

.banners>nav>ul a {
  text-transform: uppercase;
  text-decoration: none;
  transition-delay: 0s;
  transition-duration: 0.36s;
  transition-property: all;
  position: absolute;
  top: 5px;
  font-size: 20px;
  left: 20px;
  width: 100px;
  height: 40px;
  color: black;
}

.banners>nav a:hover {
  color:white;
}

.banners>nav a {
  text-indent: -200px;
}

.banners>nav:hover a {
  text-indent:0px;
}

svg, a { vertical-align: top; }

.banners>nav {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: block;
  height: auto;
  min-width: 40px;
  width: 40px;
  background-color:rgba(21,184,215,0.6);
  transition-delay: 0s;
  transition-duration: 0.4s;
  transition-property: all;
  z-index:10;
}

.banners>nav:hover {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  height: auto;
  width: 140px;
  background-color: rgb(172,218,224);
}

.banners>nav a {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity:0;
  margin-left: 1em;
}

.banners>nav:hover a {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity:1;
}

.banners>nav li {
  display: block;
  padding:0.3em;
  height:38px;
  position: relative;
}

svg,
a { display: inline-block; }

section { padding: 2em 0 0 14em; }


/*中部推荐*/
.container{
  position: relative;
  overflow: hidden;
  top: 110px;
  width: 1226px;
  margin: auto;
}

.ca-menu{
  padding:0;
  margin:20px auto;
  width: 1226px;
  overflow: hidden;
}
.ca-menu li{
  width: 160px;
  height: 300px;
  float:left;
  background: #fff;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  transition: all 300ms linear;
  margin-left: 13px;
}
.ca-menu li:last-child{
  margin-right: 0px;
}
.ca-menu li a{
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}
.ca-icon{
  font-family: 'WebSymbolsRegular', cursive;
  font-size: 60px;
  color: #333;
  text-shadow: 0px 0px 1px #333;
  line-height: 150px;
  position: absolute;
  width: 100%;
  height: 50%;
  left: 0px;
  top: 0px;
  text-align: center;
  transition: all 400ms linear;
}

.ca-content{
  position: absolute;
  left: 0px;
  width: 100%;
  height: 50%;
  top: 50%;
}
.ca-main{
  font-size: 30px;
  opacity: 0.8;
  text-align: center;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}
.ca-sub{
  text-align:center;
  font-size: 14px;
  color: #666;
  position: absolute;
  bottom: 0px;
  line-height: 40px;
  width: 100%;
  left: 0px;
  opacity: 0.8;
  transition: all 200ms linear;
}
.ca-menu li:hover{
  background-color: rgb(196,219,102);
  z-index:999;
  transform: scale(1.1);
}
.ca-menu li:hover .ca-icon{
  color: #ccff00;
  font-size: 90px;
  opacity:0.3;
}
.ca-menu li:hover .ca-icon#heart{
  -webkit-animation: smallToBig 900ms alternate infinite ease;
  -moz-animation: smallToBig 900ms alternate infinite ease;
  -ms-animation: smallToBig 900ms alternate infinite ease;
}
.ca-menu li:hover .ca-main{
  color: #ccff00;
  -webkit-animation: smallToBig 300ms ease;
  -moz-animation: smallToBig 300ms ease;
  -ms-animation: smallToBig 300ms ease;
}
.ca-menu li:hover .ca-sub{
  color: #ccff00;
  -webkit-animation: moveFromBottom 500ms ease;
  -moz-animation: moveFromBottom 500ms ease;
  -ms-animation: moveFromBottom 500ms ease;
}
@-webkit-keyframes smallToBig{
  from {
    -webkit-transform: scale(0.1);
  }
  to {
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes smallToBig{
  from {
    -moz-transform: scale(0.1);
  }
  to {
    -moz-transform: scale(1);
  }
}
@-ms-keyframes smallToBig{
  from {
    -ms-transform: scale(0.1);
  }
  to {
    -ms-transform: scale(1);
  }
}

@-webkit-keyframes moveFromBottom {
  from {
    -webkit-transform: translateY(100%);
  }
  to {
    -webkit-transform: translateY(0%);
  }
}
@-moz-keyframes moveFromBottom {
  from {
    -moz-transform: translateY(100%);
  }
  to {
    -moz-transform: translateY(0%);
  }
}
@-ms-keyframes moveFromBottom {
  from {
    -ms-transform: translateY(100%);
  }
  to {
    -ms-transform: translateY(0%);
  }
}
/*热点*/
.dis {
  DISPLAY: block
}
.undis {
  DISPLAY: none
}
#cntR {
  margin:0 auto;
  background-color: rgba(172,218,224,0.6);
  position: absolute;
  top: 0;
  right: 0;
  width: 280px;
  height: 340px;
  font-size: 12px;
}
#NewsTop {
  CLEAR: both;
  MARGIN-BOTTOM: 16px
}
#NewsTop P {
  FLOAT: left;
  LINE-HEIGHT: 22px
}
#NewsTop P.topTit {
  FONT-WEIGHT: bold;
  WIDTH: 117px;
  text-align: center;

}
#NewsTop P.topC0 {
  background-color: rgb(21,184,215);
  BORDER-LEFT: #f2f2f2 1px solid;
  WIDTH: 40px;
  CURSOR: pointer
}
#NewsTop P.topC1 {
  background-color: rgb(172,218,224);
  BORDER-LEFT: #f2f2f2 1px solid;
  WIDTH: 40px;
  COLOR: #fff
}
#NewsTop #NewsTop_tit {
  background-color: rgb(21,184,215);
  HEIGHT: 21px
}
#NewsTop #NewsTop_cnt {
  PADDING-LEFT: 32px;
  LINE-HEIGHT: 26px;
  PADDING-TOP: 7px;
  HEIGHT: 260px;
  TEXT-ALIGN: left
}
#NewsTop #NewsTop_cnt A {
  COLOR: #666;
  TEXT-DECORATION: none
}
#NewsTop #NewsTop_cnt A:hover {

  TEXT-DECORATION: underline
}


/*商品页面*/
.con-storey{
  height: auto;
  width: 1226px;
  position: relative;
  top: 100px;
  /*left: 145px;*/
  margin: auto;
}
.con-storey-left {
  float: left;
  width: 1226px;
  height: auto;
  margin-right: 10px;
  /*border: #487A6F 1px solid;*/
  position: relative;
}

.dujia {
  width: 1226px;
  overflow: hidden;
  position: relative;
  /*border: orange 1px solid;*/
  height: auto;
}
.dujia .head {
  position: relative;
  height: 50px;
  background-color: rgb(21,184,215);
}
.dujia .head .tltle {
  height: 50px;
  width: 108px;
  line-height: 0;
  font-size: 0;
  position: absolute;
  left: 0;
  top: 0;
  text-indent: -9999px;
}
.tab div{
  display: none;
}
.dujia .head .title{
  position: absolute;
  top: 18px;
  left: 5px;
  height: 30px;
  border-radius: 6px 6px 0 0;
  border: 3px solid rgb(172,218,224);
  border-bottom: none;
  color:rgb(196,219,102) ;
  background-color: white;
  font-family: 'Microsoft Yahei';
}
.dujia .head .tab-a {
  height: 35px;
  position: absolute;
  right: 15px;
  top: 18px;
}

.dujia .head .tab-a li{
  border-radius: 6px 6px 0 0;
  border: 2px solid rgb(172,218,224);
  border-bottom: none;
  color: rgb(196,219,102);
  padding: 0 15px;
  font-weight: bold;
  list-style-type: none;
  height: 30px;
  line-height: 32px;
  float: left;
  font-size: 14px;
  font-family: 'Microsoft Yahei';
  margin-right: 4px;
  cursor: pointer;
}

.active{
  background-color: white;
}

.tab{
  position: relative;
}
.list{
  padding: 20px 0 0 0;
  height: 580px;
  overflow: hidden;
  width: 1226px;
}
.list li{
  float: left;
  width: 150px;
  height: 265px;
  margin:11px;
  /*border: 1px blanchedalmond solid;*/
  padding: 0px;
  list-style-type: none;
}
.list li img{
  width: 150px;
  height: 150px;
  display: block;
}
.list li p{
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.list li p>a{
  text-decoration: none;
  color: black;
}
.list li .name{
  padding: 7px 20px 0;
  height: 18px;
  line-height: 18px;
  overflow: hidden;
}
.list li .price {
  padding: 5px 0 0 20px;
  height: 36px;
  line-height: 16px;
  overflow: hidden;
  font-family: "Arial";
  font-size: 14px;
  position: relative;
}
.list li .price .rob {
  color: #c30;
  float: left;
  margin-right: 12px;
  font-weight: bold;
}
.list li .price_r {
  color: #aaa;
  text-decoration: line-through;
  float: left;
}
.list li .ebookprice_n {
  position: absolute;
  left: 20px;
  top: 20px;
  display: inline-block;
  font: 12px Arial;
  padding: 4px 0 0 0;
  color: #787878;
}
.list a:hover{
  color:rgb(196,219,102) ;
}
